import React, { Component } from "react";
import { Form, Radio, Input, Modal, Button } from "antd";
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
const { Search } = Input

export default class Record extends Component {
  constructor() {
    super()
    this.formRef = React.createRef()
    this.state = {
      columns: [
        {
          title: "订单编号",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "房型(房号)",
          dataIndex: "num",
          key: "num",
        },
        {
          title: "宠主姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "手机号码",
          dataIndex: "phone",
          key: "phone",
        },
        {
          title: "入住时间",
          dataIndex: "time",
          key: "time",
        },
        {
          title: "离店时间",
          dataIndex: "time",
          key: "time",
        }, {
          title: "实付金额",
          dataIndex: "price",
          key: "price",
        },
        {
          title: "订单来源",
          dataIndex: "a",
          key: "a",
        },
        {
          title: "入住状态",
          dataIndex: "type",
          key: "type",
          render: (tetx, record) => {
            let status = ''
            switch (record.type) {
              case 1:
                status = '入住中'
                break
              case 2:
                status = '已退房'
                break
              case 3:
                status = '已取消'
                break
            }
            return status
          }
        },
        {
          title: "操作",
          fixed: 'right',
          render: (text, record) => {
            return <div>
              <TheButton onClick={() => this.props.history.push('/hotelOrder/record/' + text.id)}>入住详情</TheButton><br />
              <TheButton onClick={() => this.checkOut(record)}>办理退房</TheButton>
            </div>
          }
        },
      ],
      dataSource: [
        {
          id: 1,
          phone: '14734929487',
          name: 'aaa',
          type: 1,
        },
        {
          id: 2144,
          phone: '153985742',
          name: 'bbb',
          type: 2,
        },
        {
          id: 547351,
          phone: '1787484518',
          name: 'ccc',
          type: 3,
        },
      ],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: 1,
      searchValue: {},
      isModalVisible: false,
    }
  }
  componentDidMount() {
  }

  // 办理退房
  checkOut = () => {
    this.setState({
      isModalVisible: true,
    })
  }
  // 取消
  handleCancel =() =>{
    this.setState({
      isModalVisible: false
    })
    setTimeout(()=>{
      this.formRef.current.resetFields();
    },1000)
  }
  handleOk = () => {
    this.setState({ 
      isModalVisible: false,
    })
  }
  // 入住状态
  time = (e) => {
    // let { type } = this.state
    // type = e.target.value
  }
  // 搜索
  onSearch(value) {
    this.setState({
      searchValue: value,
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
    }, () => {

    })
  }
  // 导出
  exportList() {
    console.log('sss')
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      console.log('aa')
    })
  }
  render() {
    const { columns, dataSource, pageData, total, isModalVisible } = this.state
    return (
      <>
        <div className="p-layout-box commodity-content">
          <div className="p-search-box" style={{ marginBottom: 20 }}>
            <Form>
              <Form.Item
                name="cameraId"
                label="入住状态"
              >
                <Radio.Group buttonStyle="solid" defaultValue="a">
                  <Radio.Button style={{ marginRight: 20 }} value="a" onChange={this.checkStatus}>全部</Radio.Button>
                  <Radio.Button style={{ marginRight: 20 }} value="b" onChange={this.checkStatus}>入住中</Radio.Button>
                  <Radio.Button style={{ marginRight: 20 }} value="c" onChange={this.checkStatus}>已退房</Radio.Button>
                </Radio.Group>
              </Form.Item>
            </Form>
            <Form layout={'inline'}>
              <Form.Item label="订单来源" name="id">
                <Search placeholder="大众点评" onSearch={(e) => this.onSearch(e)} style={{ width: 200 }} />
              </Form.Item>
              <Form.Item label="手机号码" name="idd">
                <Search placeholder="请输入手机号码" onSearch={(e) => this.onSearch(e)} style={{ width: 200 }} />
              </Form.Item>
              <Form.Item label="订单编号" name="iddd">
                <Search placeholder="请输入订单编号" onSearch={(e) => this.onSearch(e)} style={{ width: 200 }} />
              </Form.Item>
              <TheButton size="middle" type="default" onClick={this.exportList}>导出</TheButton>
            </Form>
          </div>
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination pageNo={pageData.pageNo} pageSize={pageData.pageSize} total={total} pageChange={this.pageChange} />
        </div>
        <Modal
          title={'办理退房'}
          width='30%'
          visible={isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}>
          <Form
            ref={this.formRef}
            onFinish={(values) => this.onFinish(values)}
            labelAlign='left'
          >
            <Form.Item label="办理退房房间" name='name' ></Form.Item>
            <Form.Item label="原计划离开时间" name='name' >2023-01-12 -2023-01-18    共6晚</Form.Item>
            <Form.Item label="实际入住离开时间" name='name' ></Form.Item>
            注：
            <div>当前办理退房仅限于非APP端下单的用户&门店办理下单用户APP端下单用户,请在酒店订单详情发起提前退房操作</div>
          </Form>
        </Modal>
      </>
    )
  }
}